<template>
  <div>
    <div class="w100p flex mt10">
      <div class="earn-title">最近干扰信号统计</div>
      <!-- <div class="earn-type flex flexNoWrap">
        <div
          class="w60 flex rowCenter pointer"
          :class="{ blue: isActive == 1 }"
          @click="selectStyle(1)"
        >
          今日
        </div>
        <div class="border-right"></div>
        <div
          class="w60 flex rowCenter pointer"
          :class="{ blue: isActive == 2 }"
          @click="selectStyle(2)"
        >
          本月
        </div>
        <div class="border-right"></div>
        <div
          class="w60 flex rowCenter pointer"
          :class="{ blue: isActive == 3 }"
          @click="selectStyle(3)"
        >
          本年
        </div>
        <div class="border-right"></div>
        <div
          class="w60 flex rowCenter pointer"
          :class="{ blue: isActive == 4 }"
          @click="selectStyle(4)"
        >
          累计
        </div>
      </div> -->
    </div>
    <div class="w100p mt10">
      <div class="title-bottom-line ml1p"></div>
    </div>
    <div class="w96p mt10">
      <dv-scroll-board
        :config="config"
        style="width: 100%; height: 222px"
        @click="selectItem"
      />
    </div>
  </div>
</template>

<script>
// import { dwOrderProvinceRanking } from "@/api/data.js";
import axios from 'axios'
import { isEmpty } from '@/utils/validate'
export default {
  name: "JammingSignal",
  data () {
    return {
      // isActive: 4,
      config: {
        header: ["序号", "频率", "干扰次数"],
        data: [],
        columnWidth: [50, 100, 128],
        align: ["center"],
        headerBGC: "#47B485",
        evenRowBGC: "rgba(2, 139, 255, 0)",
        oddRowBGC: "rgba(2, 139, 255, 0.1)",
        waitTime: 5000,
        carousel: "page",
        totalMoney: "",
      },
      incomeCur: 0,
      showIncome: false,
      andcampusTotal: "",
      andCampusPercent: 40,
      modalTotalCur: 0,
      andBabyTotal: "",
      andBabyPercent: 30,
      wisdomCampusTotal: "",
      wisdomCampusPercent: 30,
      rightsInterestsTotal: "",
      productTotal: "",
      incomeColumn: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: "87",
        },
        {
          title: "名称",
          align: "left",
          width: "228",
          key: "name",
        },
        {
          title: "收入(万元)",
          align: "left",
          width: "234",
          sortable: true,
          key: "money",
        },
        {
          title: "占比",
          align: "left",
          width: "350",
          key: "percent",
          render (h, p) {
            return h(
              "div",
              {
                class: "flex",
              },
              [
                h("i-progress", {
                  props: {
                    strokeColor: ["#00F1C2", "#1890FF"],
                    percent: Number(p.row.percent),
                    hideInfo: true,
                  },
                  style: {
                    width: "120px",
                    height: "12px",
                  },
                }),
                h(
                  "div",
                  { style: { marginLeft: "10px" } },
                  p.row.percent + "%"
                ),
              ]
            );
          },
        },
      ],
      incomeData: [],
      incomeCityColumn: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: "87",
        },
        {
          title: "地市",
          align: "left",
          width: "228",
          key: "name",
        },
        {
          title: "收入(万元)",
          align: "left",
          width: "234",
          sortable: true,
          key: "money",
        },
        {
          title: "占比",
          align: "left",
          width: "350",
          key: "percent",
          render (h, p) {
            return h(
              "div",
              {
                class: "flex",
              },
              [
                h("i-progress", {
                  props: {
                    strokeColor: ["#00F1C2", "#1890FF"],
                    percent: Number(p.row.percent),
                    hideInfo: true,
                  },
                  style: {
                    width: "120px",
                    height: "12px",
                  },
                }),
                h(
                  "div",
                  { style: { marginLeft: "10px" } },
                  p.row.percent + "%"
                ),
              ]
            );
          },
        },
        // {
        //   title: "查看",
        //   align: "left",
        //   width: "217",
        //   key: "percent",
        //   render(h, p) {
        //     return h(
        //       "div",
        //       {
        //         class: "flex",
        //       },
        //       [
        //         h("img", {
        //           attrs: {
        //             src:phoneIcon,
        //           },
        //           style:{
        //             width:"16px",
        //             height:'16px'
        //           }
        //         }),
        //         h(
        //           "div",
        //           {
        //             style: {
        //               marginLeft: "8px",
        //               fontSize: " 14px",
        //               fontFamily: "PingFang SC",
        //               fontWeight: "bold",
        //               lineHeight: "18px",
        //               color: "#00E4FF",
        //             },
        //           },
        //           "各产品"
        //         ),
        //       ]
        //     );
        //   },
        // },
      ],
      incomeCityData: [],
      citySearch: "",
    };
  },
  mounted () {
    let self = this;
    this.getJammingSignalData();
    window.setInterval(() => {
      setTimeout(this.getJammingSignalData(), 0)
    }, 600000)
  },
  // props: {
  //   where: String,
  // },
  methods: {
    selectStyle (type) {
      // this.isActive = type;
      // this.getDwOrderProvinceRanking();
    },
    getJammingSignalData () {
      let self = this;
      // this.config = {
      //   header: ["", "省份", "收入e(万元)", "占比", ""],
      //   data: [],
      //   columnWidth: [46, 100, 128, 115, 92],
      //   align: ["center"],
      //   headerBGC: "rgba(2, 139, 255, 0.1)",
      //   evenRowBGC: "rgba(2, 139, 255, 0)",
      //   oddRowBGC: "rgba(2, 139, 255, 0.1)",
      //   waitTime: 5000,
      //   carousel: "page",
      //   totalMoney: "",
      // };
      axios.get('http://47.118.20.181:8080/rf/disturb').then(res => {
        //判断响应的data是否为空
        if (!isEmpty(res.data)) {
          // console.log('统计的最近干扰信号 ->', JSON.stringify(res.data))
          const allData = res.data.data;
          // if (allData.length % 5 != 0) {
          //   for (var i = 0; i < allData.length % 5; i++) {
          //     allData.push({ counter: "788", frequency: "78291900" });
          //   }
          // }
          var ranking = [];
          allData.forEach((item, i) => {
            ranking.push([
              '<div class="marquee-text-span rateColor">' +
              (item.counter ? i + 1 : "") +
              "</div>",
              '<div class="marquee-text-span rateColor">' +
              parseInt(item.frequency / 1000000) + 'Mhz' +
              "</div>",
              '<div class="marquee-text-span rateColor">' +
              item.counter + '次' +
              "</div>",
            ])
          })
          self.config = {
            header: ["序号", "频率", "干扰次数"],
            data: ranking,
            columnWidth: [80, 100, 128],
            align: ["center"],
            headerBGC: "#47B485",
            evenRowBGC: "#A2DAC3",
            oddRowBGC: "#47B485",
            waitTime: 2000,
            carousel: "page",
            totalMoney: "",
          }

        }
        else {

        }

      }
      )
    },
    selectItem (data) {
      // this.showIncome = true;
      // this.andcampusTotal = this.publicFun.formatMoney("564142");
      // this.andBabyTotal = this.publicFun.formatMoney("564142");
      // this.wisdomCampusTotal = this.publicFun.formatMoney("564142");
      // this.rightsInterestsTotal = this.publicFun.formatMoney("123451");
      // this.productTotal = this.publicFun.formatMoney("123451");
      // alert(data);
    },
    closeIncome () {
      this.showIncome = false;
    },
    changeIncomeTab (index) {
      this.incomeCur = index;
    },
    changeTotal (index) {
      this.modalTotalCur = index;
    },
    rowClassName (row, index) {
      if (index % 2 != 0) {
        return "demo-table-info-row";
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped lang="less">
.earn-title {
  width: 100%;
}
.earn-type {
  width: 55%;
  .w60:hover {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
  }
  .w60 {
    width: 60px;
  }
}
.modalContent {
  // margin-top: -7px;
}
.mt-7 {
  margin-top: -7px;
}
.modalTotal {
  width: 144px;
  height: 64px;
  padding: 7px 0;
  background: rgba(0, 228, 255, 0);
  // opacity: 0.08;
  border-radius: 4px;
  cursor: pointer;
}
.modalTotalTitle {
  text-align: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 800;
  line-height: 22px;
  color: #24ccf7;
}
.unit {
  content: '万元';
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 18px;
  color: #24ccf7;
  margin-left: 2px;
}
.percentText {
  margin-left: 4px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 16px;
  color: #24ccf7;
  // letter-spacing: 100px;
}
.modatlTotal {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 800;
  line-height: 18px;
  color: #24ccf7;
  width: 8px;
  height: 18px;
  margin-right: 1px;
  // background: #00e4ff;
}
.modalTotalCur {
  background: rgba(0, 228, 255, 0.08) !important;
}
.modalTotalCur .modalTotalTitle {
  color: #00e4ff;
}
.modatlTotalNumber {
  background: rgba(0, 228, 255, 0.2);
}
.tableBox {
  margin-top: 8px;
}
.incomeTotalLine {
  height: 0px;
  // height: 24px;
  border-bottom: 1px solid #00e4ff;
  margin-top: -1px;
}
.tableTab {
  width: 88px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
  border-radius: 4px 4px 0px 0px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: #24ccf7;
  // opacity: 0.8;
  text-align: center;
}
.tableTabCur {
  border: 1px solid #00e4ff;
  border-bottom: 1px solid #000915;
  background: transparent !important;
  color: #00e4ff !important;
  font-weight: 800 !important;
}
.tableTotal {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: #24ccf7;
}

.margin2r {
  margin-top: 2rem;
}
</style>
